---
import ReactFlowApp from '../components/ReactFlowExample';
import ReactFlowInitialApp from '../components/ReactFlowInitialExample';
import SvelteFlowApp from '../components/SvelteFlowExample/index.svelte';
import SvelteFlowInitialApp from '../components/SvelteFlowInitialExample/index.svelte';
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro example for React Flow and Svelte Flow</title>

    <style>
      html,
      body {
        margin: 0;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>React Flow</h2>
    <p>no client hydration</p>
    <ReactFlowApp />

    <p>client hydration on load (client:load)</p>
    <ReactFlowApp client:load />

    <p>client hydration on load (client:load) and initialWidth / initialHeight</p>
    <ReactFlowInitialApp client:load />

    <h2>Svelte Flow</h2>
    <SvelteFlowApp />

    <p>client hydration on load (client:load)</p>
    <SvelteFlowApp client:load />

    <p>client hydration on load (client:load) and initialWidth / initialHeight</p>
    <SvelteFlowInitialApp client:load />
  </body>
</html>
